<template>
    <div style="height:100vh; background:#F7FAFC">
        <vue-particles color="#dedede" style="height:100%; overflow:hidden"></vue-particles>
        <div class="login-wrap">
            <div class="login-title">
                后台管理系统
            </div>
            <Card class="login-layout">
                <p slot="title">
                    用户登录
                </p>
                <div>
                    <Form ref="loginForm" :model="loginForm" :rules="loginRules">
                        <FormItem prop="Account">
                            <Input v-model="loginForm.Account" placeholder="请输入用户名">
                                <Icon type="person" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem prop="Pwd">
                            <Input v-model="loginForm.Pwd" type="password" placeholder="请输入密码" @on-enter="handleLogin">
                                <Icon type="locked" :size="10" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="handleLogin" :loading="loginState" style="width:100%">{{loginText}}</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
import util from "@/libs/util";
export default {
    data() {
        return {
            loginState: false,
            loginText: "登录",
            loginForm: {
                Account: "",
                Pwd: ""
            },
            loginRules: {
                Account: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }
                ],
                Pwd: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        handleLogin() {
            this.$refs.loginForm.validate(v => {
                if (v) {
                    this.loginState = true;
                    this.loginText = "登陆中...";
                    setTimeout(() => {
                        this.loginState = false;
                        this.loginText = "登陆";
                        this.$router.replace({ name: "home" });
                    }, 1000);
                    // axios.post("api/UserLogin", this.loginForm).then(res => {
                    //     var { data, msg } = res.data;
                    //     this.$axiosDone(
                    //         res,
                    //         () => {
                    //             this.loginState = false;
                    //             this.loginText = "登陆";
                    //             localStorage.setItem("token", data);
                    //             this.$router.push({ name: "Order" });
                    //             this.$Message.success("登录成功");
                    //         },
                    //         () => {
                    //             this.loginState = false;
                    //             this.loginText = "登陆";
                    //             this.$Message.error({
                    //                 content: msg,
                    //                 duration: 5,
                    //                 closable: true
                    //             });
                    //         }
                    //     );
                    // });
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.login-wrap {
    position: absolute;
    width: 100%;
    top: 240px;
    .login-title {
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px;
    }
    .login-layout {
        width: 350px;
        margin: 0 auto;
    }
}
</style>